<template>
    <div>
        <el-card class="box-card">
            <el-form :model="filters" ref="form1" label-position="right" label-width="90px" inline>
                <el-form-item label="合同类型" prop="mechanismFullName">
                    <div class="filters-input">
                        <el-select v-model="filters.categoryId" style="width:100%" clearable placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item>
                    <Button type="primary" icon="ios-search" size="large" @click="loadData">搜索</Button>
                </el-form-item>
            </el-form>
            <el-button type="primary" icon="md-add" size="large" @click="addContract()">新增合同文本</el-button>
        </el-card>
            <el-table stripe border v-loading="tableLoading" :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="categoryName" label="合同类型"></el-table-column>
                <el-table-column prop="name" label="合同名称"></el-table-column>
                <el-table-column prop="createTime" label="上传时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="downloadContract(scope.row.libraryUrl)">下载
                        </el-button>
                        <el-button size="mini" type="danger" @click="deleteContract(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize"
                  show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        <!--合同文本 divisionVisible-->
        <el-dialog title="合同文本管理" :visible.sync="libraryVisible" :close-on-click-modal="false" width="900px">
            <div class="pp-info">
                <el-form :model="library" :rules="rules" ref="libraryForm" label-width="130px" class="demo-ruleForm">
                    <el-form-item label="合同类型" prop="categoryId">
                        <el-select v-model="library.categoryId" style="width:100%" clearable placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="合同名称" prop="name">
                        <el-input v-model="library.name"></el-input>
                    </el-form-item>
                    <el-form-item label="上传合同文本">
                        <el-upload class="upload-demo"
                                   accept="application/msword"
                                   :headers="{'x-access-token':token}"
                                   :limit="1"
                                   :on-exceed="uploadExceed"
                                   :on-success="uploadSuccess"
                                   :on-progress="uploadProgress"
                                   :data="fileName" drag :action="act" :multiple="false">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                        <el-input type="hidden" v-model="library.libraryUrl"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="libraryVisible = false">取 消</el-button>
                <el-button type="primary" :loading="formLoading" @click="sureAddLibrary('libraryForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import baseURL from '_conf/url'

    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'

    const token = Cookies.get(TOKEN_KEY)
    const act = baseURL + "/common/uploadFile"
    export default {
        data() {
            return {
                token:token,
                options: [],
                fileName: {fileName: "contract-file/"},
                act: act,
                uploadMes: "请上传合同文本",
                categoryList: [],
                radio: '',
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                // 表单相关
                tableData: [],
                tableLoading: false,
                //合同类型
                libraryVisible: false,
                library: {},
                formLoading: false,
                //校验规则
                rules: {
                    categoryId: [
                        {
                            required: true,
                            message: "请选择合同类型",
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: "请填写合同类型名称",
                        }
                    ],
                },
            }

        },

        created: function () {
            this.getCategory();
            this.loadData();
        },
        methods: {
            //合同类别
            getCategory() {
                this.getRequest("/api/contractCategory/getCategoryList").then(res => {
                    if (res.code == 20000) {
                        this.categoryList = res.data;
                        this.options = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },

            //加载数据
            loadData() {
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/contractLibrary/loadData", params).then(res => {
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },

            //上传成功
            uploadSuccess(res) {
                console.log(res)
                this.library.libraryUrl = res;
                this.uploadMes = "请上传合同文本";
            },

            //上传中
            uploadProgress() {
                this.uploadMes = "请等待合同文本上传完成";
            },

            //只支持上传一个文件，多个提示错误信息
            uploadExceed() {
                this.$message.error("只能上传一个文件");
            },

            //打开新增修改合同文本页面
            addContract() {
                this.library = {};
                this.libraryVisible = true;
            },

            //确定新增合同文本
            sureAddLibrary(libraryForm) {
                this.$refs[libraryForm].validate((valid) => {
                    if (valid) {
                        if (!this.library.libraryUrl) {
                            this.formLoading = false;
                            this.$message.error(this.uploadMes);
                            return false;
                        }
                        this.postRequest("/api/contractLibrary/saveOrUpdateLibrary", this.library).then(res => {
                            if (res.code == 20000) {
                                this.libraryVisible = false;
                                this.loadData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },

            //下载合同文本
            downloadContract(libraryUrl) {
                window.location.href = libraryUrl;
            },

            //删除合同文本
            deleteContract(row) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该类别？",
                    onOk: () => {
                        this.getRequest("/api/contractLibrary/deteleLibrary?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.loadData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },

            //表格相关
            handlePage(value) {
                this.pageNum = value;
                this.getCompanyId(this.filter);
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.getCompanyId(this.filter);
            },
        }

    }
    ;
</script>

<style lang="scss">
    .hr-left {
        .el-tree-node__content {
            height: 40px;
            font-size: 15px;
        }
        .el-card__body {
            height: 795px;
            padding: 15px;
            overflow: auto;
        }
        .el-tree-node__expand-icon {
            color: #7e066a;
        }
        .el-tree-node__expand-icon.is-leaf {
            color: transparent;
        }
        .el-tabs__content {
            overflow: auto;
        }
        .el-tree-node > .el-tree-node__children {
            overflow: auto;
            background-color: transparent;
        }
    }

    .hr-right {
        .el-card__body {
            height: 740px;
            overflow: auto;
        }
    }

    .text {
        display: inline-block;
        overflow: inherit;
    }

</style>

<style scoped lang="scss">
    .ly-wrap {
        width: 100%;
        height: 800px;

    }


</style>
